<template>
  <div class="fix-all complete-order">
    <div class="content">
      <dl class="order-cell cart-dl">
        <dt class=" md-padding  layout-row">
          <span class="td1 layout-flex ell">{{appUrlInfo.tableName}}号台桌<span class="headcount">{{allOrder.headCount}}人</span></span><span class="td2">合计{{allOrder.cart.qty}}项</span><span class="td3">￥{{allOrder.subtotal || 0}}</span>
        </dt>
        <section class="sec-content">
          <div>
            <dd class="item-height md-padding text-default layout-row" v-for='item in allOrder.cart.items'>
              <div class="item-l layout-flex layout-column layout-center">
                <p class="item-p-title ">
                  <span class="text-accent item-title vm">{{item.inventoryName}}</span>
									<span v-if="item.modifiers"><span v-for="modifier in item.modifiers.items"><span v-for="option in modifier.options" v-if="modifier.options.length!=0" class="item-info">{{option.name}}</span></span></span>
                </p>
                <p class="text-muted text-color-info item-p-info ell">{{item.extended.description}}</p>
              </div>
              <div class="item-r layout-row layout-center"><span class="inventory-count qty">x{{item.qty}}</span></div>
              <div class="item-rr layout-row layout-center"><span class="text-accent amount">￥{{item.amount}}</span></div>
            </dd>
          </div>
        </section>
      </dl>

    </div>
    <button class="bottom-buttom" v-gesture:tap.stop.prevent="continueToOrder()">继续点单</button>
  </div>
</template>

<script type="text/javascript">
  import HistoryManage from '../lib/history-manage';
  export default{
    ready: function(){
      HistoryManage.banBack();
    },
    beforeDestroy : function(){
      // debugger
      HistoryManage.removeAllEventListener();
    },
    data:function(){
      return {
        //props
        order: this.$parent.order,
        allOrder:this.$parent.allOrder,
        isShowCompleteOrder: this.$parent.isShowCompleteOrder,
        appUrlInfo: this.$parent.appUrlInfo,
      }
    },
    props:{
      isShowConfirmOrder: {
        require: true
      }
    },
    methods: {
      continueToOrder: function(){
        // debugger
        this.isShowCompleteOrder = false;
        this.isShowConfirmOrder = true;
        this.order.emptyOrder();
        this.$router.go("/");
      }
    }
  }
</script>

<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
  .complete-order{background: white;z-index:10;}
  .complete-order .order-cell{bottom: 50px;width: 100%}
  .complete-order .td1 .headcount{margin-left: 8px;border-left: 1px solid #f0f0f0;padding-left: 8px;font-size: 14px;}

  .bottom-buttom{width: 100%;line-height: 50px;position: absolute;bottom: 0;border: none;color:white;background:$font-color-primary;font-size: $font-size-accent;}
  .complete-order .btn-buttom:active{background: $btn-color-active !important;}
</style>
